<template>
  <div class="container">
    <!-- 头部：搜索 + 操作按钮 -->
    <!-- 使用flex布局实现搜索框与按钮的左右排列，符合管理系统常见布局模式 -->
    <div class="header-actions">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索考试名称/类型/状态/难度"
        class="search-input"
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button @click="handleSearch">搜索</el-button>
        </template>
      </el-input>
      <!-- 主色调按钮突出主要操作，符合用户视觉引导习惯 -->
      <el-button type="primary" @click="openDialog('add')">发布考试</el-button>
    </div>

    <!-- 考试列表表格 -->
    <!-- 使用border和stripe属性增强表格可读性，表头使用灰色背景突出层级 -->
    <el-table
      :data="filteredList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      border
      stripe
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa', fontWeight: '600' }"
    >
      <!-- 表格列定义 -->
      <!-- 固定宽度确保表格布局稳定，align=center使ID类数据居中对齐更易读 -->
      <el-table-column prop="contestId" label="考试ID" width="100" align="center" />
      <el-table-column prop="contestName" label="考试名称" width="180" />
      <el-table-column prop="contestType" label="考试类型" width="120" />
      <!-- 使用自定义模板将状态文本转换为视觉化标签，提升信息扫描效率 -->
      <el-table-column prop="contestStatus" label="考试状态" width="120">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.contestStatus)">
            {{ scope.row.contestStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 难度等级使用不同颜色标签直观区分，帮助用户快速识别难度差异 -->
      <el-table-column prop="contestDifficulty" label="难度等级" width="120">
        <template #default="scope">
          <el-tag :type="getDifficultyType(scope.row.contestDifficulty)">
            {{ scope.row.contestDifficulty }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 日期时间格式化显示，提升可读性 -->
      <el-table-column prop="startTime" label="开始时间" width="180" align="center">
        <template #default="scope">
          {{ formatDate(scope.row.startTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间" width="180" align="center">
        <template #default="scope">
          {{ formatDate(scope.row.endTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180" align="center">
        <template #default="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="创建人" width="120" />
      <!-- 使用条件渲染处理可能为空的更新时间，避免显示undefined -->
      <el-table-column prop="updateTime" label="最后更新时间" width="180" align="center">
        <template #default="scope">
          {{ scope.row.updateTime ? formatDate(scope.row.updateTime) : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="updater" label="最后更新人" width="120">
        <template #default="scope">
          {{ scope.row.updater || '-' }}
        </template>
      </el-table-column>

      <!-- 考试相关设置列 -->
      <!-- 操作按钮使用文本类型避免视觉干扰，蓝色文本突出可点击性 -->
      <el-table-column label="考试相关设置" width="300" align="center"
      fixed="right">
        <template #default="scope">
          <!-- 发布考试内容按钮 -->
          <el-button
            type="text"
            size="small"
            @click="openPublishDrawer(scope.row)"
          >
            发布考试内容
          </el-button>
          <!-- 选择考生按钮 -->
          <el-button
            type="text"
            size="small"
            @click="openSelectUserDrawer(scope.row)"
            style="color: #409eff"
          >
            选择考生
          </el-button>
                    <el-button
            type="text"
            size="small"
            @click="handleClick(scope.row)"
            style="color: #409eff"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <!-- 删除按钮使用红色文本强调危险操作，添加加载状态防止重复提交 -->
      <el-table-column label="操作" width="180" align="center"
      fixed="right">
        <template #default="scope">
          <el-button type="text" size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
          <el-button 
            type="text" 
            size="small" 
            @click="deleteContest(scope.row)" 
            style="color: #f56c6c"
            :disabled="isDeleting"
          >
            {{ isDeleting ? '删除中...' : '删除' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <!-- 完整的分页控制选项满足不同用户习惯，固定在表格下方符合浏览习惯 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="filteredList.length"
      style="margin-top: 20px;"
    />

    <!-- 发布考试内容抽屉 - 多选列表形式 -->
    <!-- 从右侧滑入的抽屉式设计避免页面跳转，50%宽度平衡内容展示与上下文保留 -->
    <el-drawer
      v-model="publishDrawerVisible"
      title="选择关联靶场"
      direction="rtl"
      size="50%"
      :before-close="handlePublishDrawerClose"
    >
      <div class="drawer-content">
        <!-- 使用表格展示靶场列表，支持多选 -->
        <!-- 添加边框提升数据层次感，selection-change事件实时跟踪选择状态 -->
        <el-table
          :data="publishRangeList"
          border
          style="width: 100%"
          @selection-change="handlePublishSelectionChange"
        >
          <!-- 多选列 -->
          <el-table-column type="selection" width="55" />
          <!-- 靶场名称列 - 用户要求展示的第一个字段 -->
          <el-table-column prop="rangeName" label="靶场名称" width="200" />
          <!-- 类型列 - 用户要求展示的第二个字段 -->
          <el-table-column prop="rangeType" label="类型" width="120" />
          <!-- 难度等级列 - 使用标签直观展示难度级别 -->
          <el-table-column label="难度等级" width="120">
            <template #default="scope">
              <!-- 将数字难度ID转换为文字描述，提升可读性 -->
              <el-tag :type="getDifficultyTagType(scope.row.difficultyId)">
                {{ formatDifficulty(scope.row.difficultyId) }}
              </el-tag>
            </template>
          </el-table-column>
          <!-- 描述列 - 用户要求展示的第四个字段 -->
          <el-table-column prop="rangeDesc" label="描述" />
        </el-table>
      </div>
      <!-- 抽屉底部按钮区 -->
      <!-- 靠右对齐符合用户操作习惯，按钮状态随选择变化提供即时反馈 -->
      <div class="drawer-footer" style="text-align: right; margin-top: 20px">
        <el-button @click="publishDrawerVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="handlePublishRelate"
          :disabled="selectedPublishRanges.length === 0"
        >
          确定关联 ({{ selectedPublishRanges.length }})
        </el-button>
      </div>
    </el-drawer>

    <!-- 选择考生抽屉 - 多选列表形式 -->
    <!-- 保持与发布内容抽屉一致的交互模式，降低用户学习成本 -->
    <el-drawer
      v-model="selectUserDrawerVisible"
      title="选择关联考生"
      direction="rtl"
      size="50%"
      :before-close="handleUserDrawerClose"
    >
      <div class="drawer-content">
        <!-- 使用表格展示考生列表，支持多选 -->
        <el-table
          :data="userList"
          border
          style="width: 100%"
          @selection-change="handleUserSelectionChange"
        >
          <!-- 多选列 -->
          <el-table-column type="selection" width="55" />
          <!-- 头像列 - 放在最前面帮助用户快速识别用户 -->
          <el-table-column label="头像" width="80" align="center">
            <template #default="scope">
              <!-- 使用圆形头像和固定尺寸，提升视觉一致性 -->
              <img
                :src="scope.row.avatarUrl"
                alt="用户头像"
                style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;"
              >
            </template>
          </el-table-column>
          <!-- 用户名列 - 关键标识信息 -->
          <el-table-column prop="userName" label="用户名" width="150" />
          <!-- 昵称列 - 人性化名称展示 -->
          <el-table-column prop="nickname" label="昵称" width="150" />
          <!-- 联系方式列 - 必要的用户联系信息 -->
          <el-table-column prop="contact" label="联系方式" />
        </el-table>
      </div>
      <!-- 抽屉底部按钮区 -->
      <div class="drawer-footer" style="text-align: right; margin-top: 20px">
        <el-button @click="selectUserDrawerVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="handleUserRelate"
          :disabled="selectedUsers.length === 0"
        >
          确定关联 ({{ selectedUsers.length }})
        </el-button>
      </div>
    </el-drawer>

    <!-- 新增/编辑弹框 -->
    <!-- 使用对话框而非抽屉，因为表单填写需要用户全神贯注，减少外部干扰 -->
    <el-dialog title="考试信息" v-model="dialogVisible" width="600px">
      <!-- 使用el-form组件提供表单验证和统一样式 -->
      <el-form :model="form" :rules="formRules" ref="formRef" label-width="120px">
        <el-form-item label="考试名称" prop="contestName">
          <el-input v-model="form.contestName" placeholder="请输入考试名称" />
        </el-form-item>
        <el-form-item label="考试类型" prop="contestType">
          <el-input v-model="form.contestType" placeholder="如 CTF、模拟赛" />
        </el-form-item>
        <!-- <el-form-item label="考试状态" prop="contestStatus">
          <el-select v-model="form.contestStatus" placeholder="请选择状态">
            <el-option label="未开始" value="未开始" />
            <el-option label="进行中" value="进行中" />
            <el-option label="已结束" value="已结束" />
            <el-option label="已取消" value="已取消" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="难度等级" prop="contestDifficulty">
          <el-select v-model="form.contestDifficulty" placeholder="请选择难度">
            <el-option label="初级" value="初级" />
            <el-option label="中级" value="中级" />
            <el-option label="高级" value="高级" />
          </el-select>
        </el-form-item>
        <!-- 使用datetime类型选择器，精确到分钟满足考试时间设置需求 -->
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker 
            v-model="form.startTime" 
            type="datetime" 
            placeholder="选择开始时间" 
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker 
            v-model="form.endTime" 
            type="datetime" 
            placeholder="选择结束时间" 
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-drawer
      title="考试详情"
      v-model="drawer"
      :with-header="true"
      width="500px"
    > <ScoreBoard v-model="contestInfo"/>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
// 导入组合式函数，实现逻辑与视图分离，提高代码可维护性
import { useCtfContest } from '@/ViewsScript/Backend/CtfContest'
import ScoreBoard from './front/contest/ScoreBoard.vue'
const drawer = ref(false)
const contestInfo = ref()

const handleClick = (row:any) => {
  drawer.value = true
  contestInfo.value = row.contestId
}
// 解构组合式函数返回的状态和方法，使模板中可以直接使用
const {
  // 状态变量
  contestList,
  filteredList,
  currentPage,
  pageSize,
  searchKeyword,
  isDeleting,
  dialogVisible,
  formRef,
  form,
  formRules,
  publishDrawerVisible,
  publishRangeList,
  selectedPublishRanges,
  selectUserDrawerVisible,
  userList,
  selectedUsers,

  // 方法
  openPublishDrawer,
  fetchPublishRangeList,
  handlePublishSelectionChange,
  handlePublishRelate,
  handlePublishDrawerClose,
  openSelectUserDrawer,
  fetchUserList,
  handleUserSelectionChange,
  handleUserRelate,
  handleUserDrawerClose,
  fetchContestList,
  handleSearch,
  resetFilter,
  handleSizeChange,
  handleCurrentChange,
  openDialog,
  submitForm,
  deleteContest,
  formatDate,
  getStatusTagType,
  getDifficultyType,
  getDifficultyTagType,
  formatDifficulty
} = useCtfContest()
</script>

<style scoped>
/* 容器样式 */
.container {
  padding: 20px;
}

/* 头部操作区样式 */
.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* 搜索框样式 */
.search-input {
  width: 300px;
}

/* 抽屉内容样式 */
.drawer-content {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 10px;
}
</style>